<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="height: 100%">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>File Explorer</title>
		<script type="text/javascript" src="dorado/boot.js"></script>
		<script type="text/javascript">$import("silk,grid,tree,common-types");</script>
		<script type="text/javascript">
			function getIcon(entity) {
				return entity.get("isDirectory") ? "images/folder.gif" : "images/file.gif";
			}
			
			dorado.onInit(function() {
				/**
				 * 定义个一个DataPath的片段拦截器，用以拦截DataPath中的CURRENT_DIR片段。
				 * CURRENT_DIR被拦截器赋予了新的含义——当前树中选中的节点所对应的文件夹。
				 */
				dorado.DataPath.registerInterceptor("CURRENT_DIR", function() {
					var data = null, node = window.$currentDirNode;
					if (node) data = node.get("data");
					return data;
				}, function() {
					return dataTypeFile;
				});
				
				var dataSet = new dorado.widget.DataSet({
					data: { id: "root", name: "demo", isDirectory: true },
					dataType: "File"
				});
				
				new dorado.widget.FormProfile({
					id: "defaultFormProfile", labelWidth: 120, hintVisible: false
				});
				
				/**
				 * 文件属性窗口
				 */
				var dialogProperties = new dorado.widget.Dialog({
					caption: "文件属性", iconClass: "silk silk-application-view-list",
					width: 400, height: 350,
					center: true, modal: true,
					layout: "Dock",
					children: [{
						$type: "AutoForm",
						id: "formProperties",
						dataSet: dataSet,
						dataPath: "!CURRENT_DIR.#children",
						cols: "*",
						autoCreateElements: true
					}],
					buttons: [
						{ caption: "确定",
							onClick: function() {
								dataSet.getData("!CURRENT_DIR.#children").reset();
								dialogProperties.hide();
							}
						},
						{ caption: "取消",
							onClick: function() {
								dialogProperties.hide();
							}
						}
					],
					onHide: function() {
						dataSet.getData("!CURRENT_DIR.#children").cancel();
					}
				});
				
				new dorado.widget.Container({
					renderTo: document.body,
					width: "100%", height: "100%",
					layout: "Dock",
					children: [{
						$type: "SplitPanel",
						position: 300,
						previewable: true,
						sideControl: {
							$type: "Panel",
							caption: "文件结构",
							iconClass: "silk silk-chart-organisation",
							collapseable: true,
							layout: "Dock",
							children: [{
								$type: "DataTree",
								id: "treeNav",
								dataSet: dataSet,
								bindingConfigs: [{
									name: "File",
									childrenProperty: "children",
									labelProperty: "name",
									recursive: true
								}],
								onDataNodeCreate: function(self, arg) {
									var node = arg.node;
									node.set({
										icon: getIcon(node.get("data")),
										hasChild: node.get("data.isDirectory")
									});
								},
								onCurrentChange: function(self, arg) {
									var node = arg.newCurrent;
									if (node) {
										if (!node.get("data.isDirectory")) node = node.get("parent");
										if (node != window.$currentDirNode) {
											window.$currentDirNode = node;
											
											self.disableBinding();
											dataSet.notifyObservers();
											self.enableBinding();
											
											var path = "";
											while (node) {
												path = node.get("label") + "/" + path;
												node = node.get("parent");
											}
											this.set("#panelFiles.caption", path);
										}
									}
								}
							}]
						},
						mainControl: {
							$type: "Panel",
							id: "panelFiles",
							caption: "<NONE>", iconClass: "silk silk-application-view-list",
							layout: "Dock",
							children: [{
								$type: "ToolBar",
								layoutConstraint: "top",
								items: [
									{ caption: "查看或修改文件属性", iconClass: "silk silk-application-form-edit",
										onClick: function() {
											var currentFile = dataSet.getData("!CURRENT_DIR.#children");
											if (currentFile) dialogProperties.show();
											else dorado.MessageBox.alert("当前没有选中任何文件。"); 
										}
									},
									"|",
									{ caption: "添加文件", iconClass: "silk silk-add",
										onClick: function() {
											var currentDir = dataSet.getData("!CURRENT_DIR");
											var newFile = currentDir.createChild("children");
											newFile.setCurrent();
											dialogProperties.show();
										}
									},
									{ caption: "删除文件", iconClass: "silk silk-delete",
										onClick: function() {
											var currentFile = dataSet.getData("!CURRENT_DIR.#children");
											if (currentFile) currentFile.remove();
											else dorado.MessageBox.alert("当前没有选中任何文件。");
										}
									}
								]
							}, {
								$type: "DataGrid",
								id: "gridFiles",
								dataSet: dataSet, dataPath: "!CURRENT_DIR.children",
								readOnly: true, rowHeight: 22, autoCreateColumns: true, stretchColumnsMode: "stretchableColumns",
								columns: [
									{ caption: "", width: 20,
										onRenderCell: function(self, arg) {
											arg.dom.style.background = "url(" + getIcon(arg.data) + ") no-repeat center";
											arg.defaultRender = false;
										}
									},
									{ property: "name", width: '*' },
									{ property: "lastModified", width: 140 }
								]
							}]
						}
					}]
				});
			});
		</script>
	</head>
	<body style="height:100%; margin:0; overflow:hidden;"></body>
</html>
